<template>
	<view>
		<view class="  banmi_flex a-c  " @click="open_color(field)">
			<view class="b_y w60" :style="'border: solid 2rpx #c0c0c0;background-color:' + bm_color">
			</view>
			<uni-easyinput class="m-l-10" v-model="bm_color" placeholder="请选择颜色">
			</uni-easyinput>
		</view>

		<t-color-picker ref="colorPicker" @confirm="confirm_color"></t-color-picker>

	</view>
</template>

<script type="text/javascript">
	export default {
		name: 'up-color',
		props: {
			field: {

				type: Number | String,
				default: ''
			},
			val: {

				type: Number | String,
				default: ''
			},

		},
		data() {
			return {
                  bm_color:''

			}
		},
		mounted() {
			this.bm_color=this.val 
		},
		methods: {
			open_color(item) {
			 
				this.$refs.colorPicker.open();

			},
			confirm_color(e) {
				this.bm_color = e.hex
				this.$emit('confirm',this.field, e.hex)
			 
			},

		}
	}
</script>
<style scoped>
	button {
		background-color: transparent;
	}

	button::after {
		border: none;
	}

	/* #ifndef APP-NVUE */
	.set-capital {
		text-align: center;
		line-height: 30px;
		height: 30px;
		padding: 0 5px;
		right: 0;
		/* width: 30px; */
		background: #1AAD19;
		color: #FFFFFF;
		position: absolute;
		bottom: 0px;
		font-size: 12px;
	}

	.close-view {
		text-align: center;
		line-height: 14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #FF5053;
		color: #FFFFFF;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
	}

	.uni-uploader__input-box {
		position: relative;
		width: 208upx;
		height: 208upx;
		border: 2upx solid #D9D9D9;
	}

	.uni-uploader__input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.uni-uploader-body {
		margin-top: 16upx;
	}

	.uni-uploader__files {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uni-uploader__img {
		display: block;
		width: 100px;
		height: 100px;
	}

	/* #endif */
</style>